<template>
	<div class="container flex-column">
		<div class="flex-box l-1">
			<image class="yunxing" src="../../static/imgs/yunxing.png" alt="">
				{{optionData.status.msg}}
		</div>
		<div class="l-2">{{optionData.experimentName}}</div>
		<div class="flex-column l-3">
			<div class="flex-box item-text">
				<span>场地名称</span>
				<span>{{optionData.siteName}}</span>
			</div>
			<div class="flex-box item-text">
				<span>实验周期</span>
				<span>{{optionData.experimentStartTime}}至{{optionData.experimentEndTime}}</span>
			</div>
		</div>
		<div class="l-4 flex-arroud">
			<div class="item flex-column-center" v-for="item in dataList">
				<div class="value">
					<span>{{item.value}}</span>
					<span>{{item.unit}}</span>
				</div>
				<span class="mt-10">{{item.name}}</span>
			</div>
		</div>
		<div class="l-5 flex-column">
			<span class="name">实验数据</span>
			<div class="chart flex-wrap">
				<div v-for="item in expDataList" class="flex-column-center item">
					<span class="value">
						<span>{{item.value}}</span>
					</span>
					<span class="mt-10">{{item.attribute}}</span>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		request
	} from '@/utils/http.js'
	let lineOptions = {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(0, 255, 233,0)'
						}, {
							offset: 0.5,
							color: 'rgba(255, 255, 255,1)',
						}, {
							offset: 1,
							color: 'rgba(0, 255, 233,0)'
						}],
						global: false
					}
				},
			},
		},

		grid: {
			top: 40,
			right: 40,
			bottom: 35,
			left: 50,
		},
		xAxis: {
			type: 'category',
			data: ['2次', '5次', '10次', '15次', '20次'],
			axisLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(119, 169, 185, 0.25)'
				}
			},

			axisLabel: {
				textStyle: {
					color: '#5A6E90',
				}

			},
			splitLine: {
				show: false
			},
			boundaryGap: false,

		},

		yAxis: {
			type: 'value',
			min: 0,
			// max: 140,
			splitNumber: 4,
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(119, 169, 185, 0.25)'
				}
			},
			axisLine: {
				show: false,
			},
			axisLabel: {
				margin: 10,
				show: true,
				color: '#5A6E90',
			},
			axisTick: {
				show: true,
			},
		},
		series: [{
			name: 'A项电压',
			type: 'line',
			data: [2, 32, 23, 4, 566, 74, 3]
		}]
	}
	export default {
		name: 'detail',
		data() {
			return {
				chartDy: null,
				chartDl: null,
				dataList: [{
					name: '温度',
					value: '0',
					unit: '℃'
				}, {
					name: '湿度',
					value: '0',
					unit: '%'
				}, {
					name: '气压',
					value: '0',
					unit: 'pa'
				}],
				expDataList: [{
					name: 'A项电压',
					value: '0',
					unit: 'v'
				}, {
					name: 'B项电压',
					value: '0',
					unit: 'v'
				}, {
					name: 'C项电压',
					value: '0',
					unit: 'v'
				}, ],
				optionData:{}
			}
		},
		methods: {
			findName(val, list, key, targetKey) {
				const node = list.find(o => {
					return o[key] === val
				})
				if (node) {
					return node[targetKey]
				}
			},
			getData(id) {
				uni.showLoading({
					title: '加载中'
				});
				Promise.all([request('/blade-platform/devicetable/deviceStatus', 'get'),
					request('/blade-platform/home/getHarmonicData?id=' + id, 'get')
				]).then(res => {
					console.log(res)
					this.dataList[0].value = this.findName(this.dataList[0].name, res[0], 'attributeName',
						'attributeValue')
					this.dataList[1].value = this.findName(this.dataList[1].name, res[0], 'attributeName',
						'attributeValue')
					this.dataList[2].value = this.findName(this.dataList[2].name, res[0], 'attributeName',
						'attributeValue')
					this.expDataList = res[1]
					uni.hideLoading();
				}).catch(err => {

					uni.hideLoading();
				})
				// request('/blade-platform/devicetable/deviceStatus', 'get').then(res => {
				// 	console.log(res)
				// 	this.dataList[0].value = this.findName(this.dataList[0].name, res, 'attributeName',
				// 		'attributeValue')
				// 	this.dataList[1].value = this.findName(this.dataList[1].name, res, 'attributeName',
				// 		'attributeValue')
				// 	this.dataList[2].value = this.findName(this.dataList[2].name, res, 'attributeName',
				// 		'attributeValue')

				// })
			}
		},
		mounted() {

			// this.chartDy = echarts.init(document.getElementById(`dy`))
			// this.chartDy.setOption(lineOptions, true)
			// this.chartDl = echarts.init(document.getElementById(`dl`))
			// this.chartDl.setOption(lineOptions, true)
		},
		onLoad(option) {
			console.log(option.data)
			this.optionData = JSON.parse(option.data)
			this.getData(this.optionData.id)
			Date.prototype.format = function(fmt)
			{ 
			　　var o = {
			　　　　"M+" : this.getMonth()+1, //月份
			　　　　"d+" : this.getDate(), //日
			　　　　"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
			　　　　"H+" : this.getHours(), //小时
			　　　　"m+" : this.getMinutes(), //分
			　　　　"s+" : this.getSeconds(), //秒
			　　　　"q+" : Math.floor((this.getMonth()+3)/3), //季度
			　　　　"S" : this.getMilliseconds() //毫秒
			　　};
			　　if(/(y+)/.test(fmt))
			　　　　fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
			　　for(var k in o)
			　　　　if(new RegExp("("+ k +")").test(fmt))
			　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
			　　return fmt;
			} 
			this.optionData.experimentStartTime = new Date(this.optionData.experimentStartTime).format("yyyy-MM-dd HH:mm");
					this.optionData.experimentEndTime = new Date(this.optionData.experimentEndTime).format("MM-dd HH:mm");
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: url('../../static/imgs/detail_bg.png')no-repeat;
		background-size: 100% 100%;
		padding: 50upx;
		box-sizing: border-box;
		color: #fff;

		.l-1 {
			color: #2FDD9D;
			font-size: 32upx;

			.yunxing {
				width: 20upx;
				height: 30upx;
				margin-right: 10upx;
			}
		}

		.l-2 {
			font-size: 44upx;
			font-weight: bold;
			margin-top: 25upx;
		}

		.l-3 {
			margin-top: 56upx;

			.item-text {
				white-space: nowrap;
				padding-left: 25upx;
				position: relative;
				font-size: 32upx;

				span:nth-child(1) {
					color: rgba(255, 255, 255, 0.63);
					margin-right: 20upx;
					word-break: keep-all;
				}

				&:before {
					position: absolute;
					left: 0upx;
					width: 14upx;
					height: 14upx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.63);
					content: '';
				}
			}

			.item-text+.item-text {
				margin-top: 38upx;
			}
		}

		.l-4 {
			width: 100%;
			background-color: #fff;
			border-radius: 20upx;
			height: 270upx;
			flex: none;
			margin-top: 66upx;


		}

		.item {
			width: 154upx;
			height: 154upx;
			background: rgba(71, 139, 255, 0.05);
			border: 1px dashed #478BFF;
			border-radius: 18upx;
			color: #478BFF;
			justify-content: center;

			.value {
				display: flex;
				align-items: flex-start;

				span:nth-child(1) {
					font-size: 44upx;
				}

				span:nth-child(2) {
					font-size: 20upx;
				}
			}
		}

		.l-5 {
			margin-top: 20upx;
			width: 100%;
			height: 503upx;
			flex: none;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 42upx 30upx;
			box-sizing: border-box;

			.name {
				font-size: 36upx;
				color: #333;
				padding-left: 20upx;
				position: relative;

				&:before {
					position: absolute;
					left: 0;
					top: 50%;
					width: 13upx;
					height: 32upx;
					transform: translateY(-50%);
					background: linear-gradient(to right, #478BFF, #ffffff);
					content: '';
					z-index: 2;
				}
			}

			.chart {
				width: 100%;
				flex: 1;
				height: 0;
				.item{
					margin: 18upx;
				}
			}
		}
	}
</style>